<template>
  <div>
    <div class="tHead"
      ><div class="type"
        ><img style="margin: 0 15px 0 20px" src="../../assets/imgs/区管-评价类型.png" />
        <p>指标管理--评价类型</p></div
      ><div class="tHeadNew"
        ><img
          alt="新建评价类型"
          src="../../assets/imgs/区管-新建评价类型.png"
          @click="newAppraise()" /></div
    ></div>
    <div class="tableBox">
      <el-table
        :data="data.table"
        style="width: 100%"
        :header-cell-style="{ background: '#e0f4df', color: '#49ac6e' }"
        class="table"
      >
        <el-table-column label="" width="100" />
        <el-table-column label="评价类型" width="100" align="center">
          <template #default="scope">
            <p>{{ scope.row.type }}</p>
          </template>
        </el-table-column>
        <el-table-column label="" width="650" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <div class="edit">
              <img
                src="../../assets/imgs/区管-评价类型-编辑.png"
                @click="handleEdit(scope.$index, scope.row)"
              />
              <img
                src="../../assets/imgs/区管-评价类型-删除.png"
                @click="handleDelete(scope.$index, scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog v-model="dialogFormVisible" width="30%" :show-close="false" class="dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <p :id="titleId" :class="titleClass" class="logStyle">新建评价类型</p>
            <el-icon class="el-icon--left" @click="close"
              ><svg
                viewBox="0 0 1024 1024"
                style="color: #cecfce"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
                />
                <path
                  fill="currentColor"
                  d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                /></svg
            ></el-icon>
          </div>
        </template>
        <el-form :model="form">
          <el-form-item label="评价类型" :label-width="formLabelWidth">
            <el-input v-model="form.region" placeholder="请输入评价类型" style="width: 90%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footerBox">
            <span class="dialog-footer">
              <el-button class="btn" @click="dialogFormVisible = false">取消</el-button>
              <el-button class="btn btnC" type="success" @click="addTypeList()">确定</el-button>
            </span>
          </div>
        </template>
      </el-dialog>
    </div>
    <div>
      <el-dialog v-model="dialogFormVisible2" width="30%" :show-close="false" class="dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <p :id="titleId" :class="titleClass" class="logStyle">修改评价类型</p>
            <el-icon class="el-icon--left" @click="close"
              ><svg
                viewBox="0 0 1024 1024"
                style="color: #cecfce"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
                />
                <path
                  fill="currentColor"
                  d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                /></svg
            ></el-icon>
          </div>
        </template>
        <p style="text-align: center; margin-bottom: 20px">当前类型：{{ form.temp }}</p>
        <el-form :model="form">
          <el-form-item label="评价类型" :label-width="formLabelWidth">
            <el-input v-model="form.row.type" placeholder="请输入评价类型" style="width: 90%" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footerBox">
            <span class="dialog-footer">
              <el-button class="btn" @click="dialogFormVisible2 = false">取消</el-button>
              <el-button class="btn btnC" type="success" @click="editTypeList()">确定</el-button>
            </span>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { addType, delType, editType, getTypeList } from '@/api/table'
import { log } from 'console'
import { number } from 'vue-types'
interface Type {
  id: any
  type: string
}
let data = reactive({
  table: [],
  page: 1,
  size: 5
})
const dialogFormVisible = ref(false)
const dialogFormVisible2 = ref(false)
const formLabelWidth = '100px'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  row: {
    id: '',
    type: ''
  },
  temp: ''
})
const editTypeList = () => {
  editType({
    id: form.row.id,
    type: form.row.type
  }).then((resp) => {
    console.log(resp)
    dialogFormVisible2.value = false
    list()
  })
}
const addTypeList = () => {
  addType({
    type: form.region
  }).then((resp) => {
    console.log(resp)
    dialogFormVisible.value = false
    list()
  })
}
const list = () => {
  getTypeList({
    current: 1,
    size: 10
  }).then((resp) => {
    data.table = resp.data
  })
}
list()
const newAppraise = () => {
  dialogFormVisible.value = true
  console.log(dialogFormVisible.value)
}
const handleEdit = (index: number, row: Type) => {
  dialogFormVisible2.value = true
  form.row.id = row.id
  form.temp = row.type
  console.log(index, row)
}
const handleDelete = (index: number, row: Type) => {
  console.log(index, row)
  delType({ id: row.id }).then((resp) => {
    list()
    console.log(resp)
  })
}
</script>

<style>
.footerBox {
  display: flex;
  justify-content: center;
  width: 100%;
}
.dialog-footer {
  width: 80%;
  display: flex;
  justify-content: center;
}
.btnC {
  background-color: #2c8f79;
}
.btn {
  border-radius: 15px;
  width: 95px;
}
.logStyle {
  color: #3faa63;
  font-size: 15px;
  font-weight: bold;
}
.dialog {
  border-radius: 25px;
}
.el-dialog__header {
  background-color: #edf9ed;
  margin-right: 0px;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
}
.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  color: #3eab63;
}
.tableBox {
  margin-top: 20px;
}
.edit {
  display: flex;
  justify-content: center;
}
.edit img {
  width: 18px;
  margin: 0px 12px 0px 12px;
}
.tHead {
  background-color: #ffffff;
  width: 100%;
  height: 55px;
  display: flex;
  border-radius: 10px;
  color: #7a7a7a;
}
.tHeadNew {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 50%;
  padding-right: 50px;
}
.type {
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
}
.type1 {
  display: flex;
  justify-content: center;
}
</style>
